<template>
  <view class="page-root">
    <nav-bar title="账号设置" color="white" show-back bg-color="black"></nav-bar>
    <view class="content">
      <view class="modes-list">
        <view class="modes-group">
          <view v-for="item in modes" :key="item.storeKey" class="modes-item flex items-center">
            <view
              :style="{ background: item.bgColor }"
              class="w-25rpx h-25rpx rounded-full flex items-center justify-center"
            >
              <!-- <u-image :src="item.icon" mode="aspectFill" width="20rpx" height="20rpx"></u-image> -->
              <u-icon :name="item.icon" size="15rpx" color="red"></u-icon>
            </view>
            <view class="flex-auto ml-10rpx">
              <u-text :text="item.label" margin="5rpx" size="11rpx" bold></u-text>
              <u-text :text="item.subLabel" type="info" margin="5rpx"></u-text>
            </view>
            <view>
              <u-switch v-model="item.enabled" @change="onItemClick($event, item)"></u-switch>
              <!-- <u-icon name="arrow-right" size="15rpx"></u-icon> -->
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 弹窗提示 -->
    <resultPopup ref="refCommonPopup" :show-icon="false">
      <template #default="{ result }">
        <view class="p-10rpx my-30rpx flex-col items-center justify-center text-center"> {{ result.content }} </view>
      </template>
      <template #confirm="{ config }">
        <view class="btns flex">
          <view class="btns-item" @click="refCommonPopup.close()">
            <text class="btns-item-txt"> 取消 </text>
          </view>
          <view class="btns-item confirm" @click="config.onConfirm(config)">
            <text class="btns-item-txt"> 确定 </text>
          </view>
        </view>
      </template>
    </resultPopup>
  </view>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { useStore } from "vuex";
import resultPopup from "@/components/common-popup/result-popup.vue";

import IconEdit from "./images/icon-edit.svg";
import IconOut from "./images/icon-out.svg";
const store = useStore();
const modes = reactive([
  {
    label: "菜品列表无图模式",
    subLabel: "",
    icon: IconEdit,
    bgColor: "#eef6ff",
    storeKey: "noImageMode",
    enabled: true,
    // func: () => {
    //   clearCache();
    // },
  },
]);

const onItemClick = (e, item) => {
  console.log({e, item});
  if (item.func && typeof item.func === "function") {
    item.func();
  } else {
    try {
      item.enabled = e;
      store.commit("business/setAppSettingByKey", {
        key: item.storeKey,
        value: item.enabled,
      });
      uni.showToast({
        title: "修改成功",
        icon: "success",
        mask: true,
      });
    } catch (error) {
      uni.showToast({
        title: "修改失败",
        icon: "error",
        mask: true,
      });
    }
  }
};
const refCommonPopup = ref();

const loginoutClick = () => {
  const popupConfig = {
    title: "提示",
    content: "确认退出登录吗？",
    confirmText: "确认",
    cancelText: "取消",
    autoClose: false,
    //----- 自定义数据
    onConfirm: () => {
      store.dispatch("user/logout", { isReLaunch: true });
    },
  };
  refCommonPopup.value.open(popupConfig);
};

const clearCache = () => {
  // const popupConfig = {
  //   title: "提示",
  //   content: "确定清除缓存吗？该操作后需要重新登陆! 请确保您的所有数据已提交。",
  //   confirmText: "确认",
  //   cancelText: "取消",
  //   autoClose: false,
  //   onConfirm: async () => {
  //     console.log("用户点击确定");
  //     await store.dispatch("user/logout", { isReLaunch: true });
  //   },
  // };
  // refCommonPopup.value.open(popupConfig);
};

onMounted(() => {
  const appSetting = store.getters.appSetting;
  if (!appSetting) return;
  modes.forEach((item) => {
    item.enabled = appSetting[item.storeKey] || false;
  });
});
</script>
<style lang="scss" scoped>
.page-root {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fafcfd;
  justify-content: flex-start;
  align-items: flex-start;
  .content {
    // height: 100%;
    width: 100%;
    margin: 20rpx auto;
    max-width: 70vw;
    background-color: white;
    border-radius: 10rpx;
  }
}

.modes-list {
  width: 100%;
  align-self: center;
  align-items: center;
  border-top-right-radius: 5rpx;
  border-top-left-radius: 5rpx;
  overflow: hidden;

  .title {
    background-color: lightgray;
    padding: 10rpx;
  }

  .modes-group {
    padding: 10rpx;

    .modes-item {
      // border-bottom: 1px solid #eee;
      margin: 10rpx 0rpx;
    }
  }
}

.btns-item {
  background-color: #efefef;
  padding: 5rpx 20rpx;
  border-radius: 5rpx;
  margin: 0rpx 15rpx;
  font-size: 12rpx;
  &.confirm {
    color: white;
    background-color: red;
  }

  .btns-item-txt {
    font-size: 10rpx;
    padding: 5rpx 15rpx;
  }

  ::v-deep .u-button {
    padding: 2rpx 20rpx;
  }
}
</style>
